<template>
	<view class="order-container" >
		<scroll-view class="order-nav" scroll-x="true">
			<view v-for="(statusItem, statusIndex) in statusList" :key="statusIndex" class="order-nav-item" :id="statusItem.id" :data-current="statusIndex" @click="ontabtap">	
				<text class="order-nav-item-title" :class="statusItem.status === orderStatus ? 'active ns-text-color' : ''">{{ statusItem.name }}</text>
			</view>
		</scroll-view>
		<mescroll-uni ref="mescroll" @getData="getListData" top="100rpx" :size="10">
			<block slot="list">
				<block v-if="orderList.length > 0">
					<view class="order-list">
						
						<view class="order-item" v-for="(orderItem, orderIndex) in orderList" :key="orderIndex" @click="goDetail(orderItem)">
							<view class="order-header">
								<text class="ns-font-size-base">{{ orderItem.order_no }}</text>
								<text class="status-name ns-text-color">{{ orderItem.order_status_name }}</text>
							</view>
							<view class="order-body">
								<view class="goods-wrap">
									<view class="goods-img"><image :src="$util.img(orderItem.sku_image, { size: 'mid' })" mode="aspectFill" :lazy-load="true"></image></view>
									<view class="goods-info">
										<view class="goods-name">{{ orderItem.sku_name }}</view>
										<view class="goods-sub-section">
											<view>
												<text class="goods-price">
													<text class="unit">￥</text>
													<text>{{ orderItem.price }}</text>
												</text>
												<text class="goods-num">
													<text class="iconfont iconclose"></text>
													{{ orderItem.num }}
												</text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="order-footer">
								<view class="order-base-info">
									<view class="total" :class="orderItem.order_status === 0 || orderItem.order_status === 1 ? 'total-border' : ''">
										<text>共{{ orderItem.num }}件商品</text>
										<text v-if="orderItem.order_status === 0">
											待付定金：
											<text class="ns-font-size-lg ns-text-color">{{ $lang('common.currencySymbol') }}{{ orderItem.pay_deposit_money }}</text>
										</text>
										<text v-else-if="orderItem.order_status === 1">
											待付尾款：
											<text class="ns-font-size-lg ns-text-color">{{ $lang('common.currencySymbol') }}{{ orderItem.final_money }}</text>
										</text>
										<text v-else-if="orderItem.order_status === 2">
											合计：
											<text class="ns-font-size-lg ns-text-color">{{ $lang('common.currencySymbol') }}0.00</text>
										</text>
										<text v-else-if="orderItem.order_status === -1">
											合计：
											<text class="ns-font-size-lg ns-text-color">{{ $lang('common.currencySymbol') }}{{ orderItem.order_money }}</text>
										</text>
									</view>
									<view class="operation">
										<button class="pay-balance" v-for="(item,index) in orderItem.order_status_action.member_action" @click.stop="operation(item.action, orderItem)">{{item.title}}</button>
										<!-- <button class="pay-advance" @click="payAdvance(orderItem)" :class="orderItem.order_status === 0 && orderItem.pay_deposit_time_ident == 1 ? 'active' : ''" v-if="orderItem.order_status === 0">支付定金</button>
										<button class="pay-balance" @click="payBalance(orderItem)" :class="orderItem.order_status === 1 && orderItem.pay_final_time_ident == 1 ? 'active' : ''" v-if="orderItem.order_status === 1">{{orderItem.order_status_name}}</button> -->
									</view>
								</view>
								<!-- <view class="order-operation" v-if="orderItem.action.length > 0">
									<view class="order-box-btn" v-if="orderItem.is_evaluate == 1" @click="operation('memberOrderEvaluation', orderItem)">
										<text v-if="orderItem.evaluate_status == 0">评价</text>
										<text v-else-if="orderItem.evaluate_status == 1">追评</text>
									</view>
									<view class="order-box-btn" :class="{ 'ns-border-color ns-text-color' : operationItem.action == 'orderPay' }" v-for="(operationItem, operationIndex) in orderItem.action"
										:key="operationIndex"
										@click="operation(operationItem.action, orderItem)">
										{{ operationItem.title }}
									</view>
								</view>
								<view class="order-operation" v-else-if="orderItem.action.length == 0 && orderItem.is_evaluate == 1">
									<view class="order-box-btn" v-if="orderItem.is_evaluate == 1" @click="operation('memberOrderEvaluation', orderItem)">
										<text v-if="orderItem.evaluate_status == 0">评价</text>
										<text v-else-if="orderItem.evaluate_status == 1">追评</text>
									</view>
								</view> -->
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view>
						<ns-empty :isIndex="!1" :text="$lang('emptyTips')"></ns-empty>
					</view>
				</block>
			</block>
		</mescroll-uni>
		
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import orderMethod from '../public/js/orderMethod.js';
	export default {
		data() {
			return {
				statusList: [],
				orderList: [],
				orderStatus: '',
				member_id:0
			}
		},
		mixins:[orderMethod],
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
			this.isIphoneX=this.$util.uniappIsIPhoneX();
			this.getOrderStatus();
			
			if (uni.getStorageSync('token')) {
				if (this.$refs.mescroll){
					this.$refs.mescroll.refresh();
				}
			} else {
				this.$util.redirectTo('/pages/login/login/login', {
					back: '/pages/order/list/list?status=' + this.orderStatus
				});
			}
			if(uni.getStorageSync('userInfo')){
				this.member_id = uni.getStorageSync('userInfo').member_id
			}
		},
		methods: {
			//跳转详情页
			goDetail(orderData){
				console.log(orderData)
				if(orderData.order_status == 0){
					this.$util.redirectTo('/promotionpages/presale/payment/payment_first',{id:orderData.id})
				}else if(orderData.order_status == 1){
					this.$util.redirectTo('/promotionpages/presale/payment/payment',{id:orderData.id})
				}else{
					this.$util.redirectTo('/promotionpages/presale/order_detail/order_detail',{id:orderData.id})
				}
				
			},
			//操作
			operation(action, orderData) {
				console.log(action)
				let index = this.status;
				switch (action) {
					case 'orderPay': // 支付
						this.orderPay(orderData);
						break;
					case 'deleteOrder': // 删除
						this.deleteOrder(orderData.id,() => {
							this.$refs.mescroll.refresh();
						});
						break;
					case 'orderClose': //关闭
						this.orderClose(orderData.id, () => {
							this.$refs.mescroll.refresh();
						});
						break;
					case 'orderPayDeposit'://定金支付
						this.orderPayDeposit(orderData, () => {
						});
						break;
					case 'refundDeposit'://退定金
						console.log(orderData.id)
						this.refundDeposit(orderData.id, () => {
							this.$refs.mescroll.refresh();
						});
						break;
						
					case 'orderPayFinal': //支付尾款
						orderData.member_id = this.member_id
						this.orderPayFinal(orderData, () => {
							this.$util.redirectTo('/promotionpages/presale/payment/payment',{id:orderData.id})
						});
						break;
					case 'memberTakeDelivery': //收货
						this.orderDelivery(orderData.order_id, () => {
							// this.$refs.mescroll.refresh();
						});
						break;
					case 'trace': //查看物流
						this.$util.redirectTo('/pages/order/logistics/logistics', {
							order_id: orderData.order_id
						});
						break;
					case 'memberOrderEvaluation': //评价
						this.$util.redirectTo('/pages/order/evaluate/evaluate', {
							order_id: orderData.order_id
						});
						break;
				}
			},
			getOrderStatus() {
				this.statusList = [
					{
						status: '',
						name: '全部',
						id: 'status_0'
					},
					{
						status: 0,
						name: '待付款',
						id: 'status_0'
					},
					{
						status: 1,
						name: '待付尾款',
						id: 'status_1'
					},
					{
						status: 2,
						name: '已完成',
						id: 'status_2'
					},
					{
						status: -1,
						name: '已关闭',
						id: 'status_3'
					}
				];
			},
			
			ontabtap(e){				
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.orderStatus = this.statusList[index].status;
				
				this.$refs.loadingCover.show();
				this.$refs.mescroll.refresh();
			},
			getListData(mescroll) {
				this.$api.sendRequest({
					url: '/presale/api/order/page',
					data:{
						page: mescroll.num,
						page_size: mescroll.size,
						order_status: this.orderStatus
					},
					success: res => {
						let newArr=[]
						let msg=res.message;
						if(res.code==0 && res.data){
							newArr = res.data.list;
						}else{
							this.$util.showToast({title:msg})
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.orderList = []; //如果是第一页需手动制空列表
						
						this.orderList = this.orderList.concat(newArr); //追加新数据
						this.orderList.forEach((v)=>{
							if(v.order_status_action){
								v.order_status_action = JSON.parse(v.order_status_action)
							}
							// console.log(JSON.parse(v.order_status_action))
							// v.order_status_action = JSON.parse(v.order_status_action)
						})
						this.getPayTime();
						// this.orderList.forEach((v)=>{
						// 	v.order_goods.forEach((vo)=>{
						// 		if(vo.sku_spec_format){
									
						// 			 try {
						// 				vo.sku_spec_format=JSON.parse(vo.sku_spec_format);
										
						// 			} catch(e) {
						// 				vo.sku_spec_format = vo.sku_spec_format;
										
						// 			}
						// 		}else{
						// 			vo.sku_spec_format=[]
						// 		}
						// 	});
						// });
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			getPayTime(){
				if(!this.orderList.length) return false;
				this.orderList.forEach((item,index)=>{
					 var timestamp = Date.parse(new Date());
					 if(item.pay_deposit_time < timestamp){
						 item.pay_deposit_time_ident = 1;
					 }else{
						 item.pay_deposit_time_ident = 0;
					 }
					 
					 if(item.pay_final_time < timestamp){
						item.pay_final_time_ident = 1;
					 }else{
						item.pay_final_time_ident = 0;
					 }
				});
			},
			payAdvance(item){
				console.log(465)
				this.$api.sendRequest({
					url: '/presale/api/ordercreate/depositPayment',
					data:{
						presale_id: item.presale_id,
						sku_id: item.sku_id,
						num: item.num,
						latitude: item.latitude,
						longitude: item.longitude
					},
					success: res => {
						console.log(res)
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			payBalance(item){
				console.log(item)
				this.$util.redirectTo('/promotionpages/presale/payment/payment',{id:item.id})
				// this.$api.sendRequest({
				// 	url: '/presale/api/ordercreate/finalPayment',
				// 	data:{
				// 		id:item.id,
				// 		presale_id: item.presale_id,
				// 		sku_id: item.sku_id,
				// 		num: item.num,
				// 		member_id: this.member_id,
				// 	},
				// 	success: res => {
				// 		console.log(res)
				// 		this.$util.redirectTo('/promotionpages/presale/payment/payment',{id:item.id})
				// 	},
				// 	fail: res => {
				// 		if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				// 	}
				// });
			}
		
		}
	} 
</script>

<style lang="scss">
@import '../public/css/order_list.scss';
</style>
